<template>
  <div>
    <table border="1" class="table">
      <caption>欢迎光临</caption>
      <tr>
        <td>苹果10/¥，折扣《8折》 </td>
      </tr>
      <tr>
        <td>
          请输入您要购买的斤数：<input type="text" v-model.number="sum">
        </td>
      </tr>
      <tr>
        <td>
          <button @click="pay">结账买单</button>
        </td>
      </tr>
      <tr>
        <td>
          结账单:总价:{{total}}¥元 折后价:{{rebate}}¥元,省了:{{save}}¥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TaskOneDemoApp',

  data() {
    return {
      sum:'0',
      total:'0',
      rebate:'0',
      save:'0'

    };
  },

  mounted() {
    
  },

  methods: {
    pay(){
     this.total= this.sum*10
     this.rebate=this.sum*8
     this.save=this.total-this.rebate
    }
  },
};
</script>

<style lang="less" scoped>
</style>
